<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="切换店铺" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="currentLoginBox">
			<text class="title">当前登录店铺</text>
			<view class="line"></view>
			<text class="merchantName">{{currentLoginMerchant}}</text>
		</view>
		<view class="selectShopBox">
			<text class="title">选择店铺</text>
			<view class="line"></view>
		</view>
		<view class="contentBox">
			<view class="noData" v-show="merchantData.length == 0">
				<image src="../../static/icons/switchShop-merchant.png"></image>
				<text>暂无可选店铺</text>
			</view>
			<view class="tableData" v-show="merchantData.length != 0">
				<text 
					class="merchantName"
					v-for="(item) in merchantData"
					:key="item.id"
				>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				merchantData:[],
				// merchantData:[
				// 	{id:1,name:"瑞安市加叻服饰经营部"},
				// 	{id:2,name:"杭州市聚水潭"},
				// 	{id:3,name:"杭州加叻网络科技有限公司"},
				// 	{id:4,name:"杭州加叻信息技术有限公司"}
				// ],
				currentLoginMerchant:"瑞安市加叻服饰经营部"
			}
		}
	}
</script>

<style lang="scss" scoped>
	.currentLoginBox{
		width: 100%;
		float: left;
		height: auto;
		.title{
			width: calc(100% - 60rpx);
			margin-left:30rpx;
			float: left;
			margin-top: 15rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: rgb(50, 50, 50);
			z-index: 2;
			position: relative;
		}
		.line{
			width: 215rpx;
			height: 30rpx;
			background:linear-gradient(to right,#f9c234,rgba(249,194,52,0.1)) ;
			position: relative;
			left: 50rpx;
			margin-top: 40rpx;
			z-index: 1;
		}
		.merchantName{
			width: calc(100% - 60rpx);
			margin-left:30rpx;
			float: left;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 34rpx;
			background-color: #fff;
			margin-top: 25rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 15rpx rgba(0,0,0,0.05);
			color: rgb(45, 45, 45);
		}
	}
	.selectShopBox{
		width: 100%;
		height: auto;
		float: left;
		margin-top: 25rpx;
		.title{
			width: calc(100% - 60rpx);
			margin-left:30rpx;
			float: left;
			margin-top: 15rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: rgb(50, 50, 50);
			z-index: 2;
			position: relative;
		}
		.line{
			width: 145rpx;
			height: 30rpx;
			background:linear-gradient(to right,#f9c234,rgba(249,194,52,0.1)) ;
			position: relative;
			left: 50rpx;
			margin-top: 40rpx;
			z-index: 1;
		}
	}
	.contentBox{
		position: absolute;
		width: 100%;
		top: 480rpx;
		bottom: 0;
		overflow-y: auto;
		.noData{
			width: 100%;
			height: 100%;
			float: left;
			image{
				width: 280rpx;
				height: 280rpx;
				position: relative;
				left: 50%;
				margin-left: -140rpx;
				margin-top: 150rpx;
			}
			text{
				width: 100%;
				float: left;
				height: 20rpx;
				line-height: 20rpx;
				font-size: 28rpx;
				color: #bdbdbd;
				text-align: center;
			}
		}
		.tableData{
			width: 100%;
			float: left;
			height: auto;
			.merchantName{
				width: calc(100% - 60rpx);
				margin-left:30rpx;
				float: left;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 34rpx;
				background-color: #fff;
				margin-bottom: 25rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 0rpx 15rpx rgba(0,0,0,0.05);
				color: rgb(45, 45, 45);
			}
		}
	}
</style>